<template>
  <view class="list">
    <!-- 顶部工具栏 -->
    <div class="top_tool t-ju-between">
      <div class="t_tool_left t-ali-center">
        <image class="image" src="https://img02.mockplus.cn/image/2022-07-26/eeef56f0-d8d1-11ec-a554-639301d58d5b.png"
          mode=""></image>
        <span class="text">联系设计师</span>
      </div>
      <div class="t_tool_right t-ali-center">
        <image class="image" mode="widthFix" src="../../static/design/qiehuan.png"></image>
        <span class="text">切换方案（3）</span>
      </div>
    </div>

    <liu-folding-panel :dataList="dataList" @clickChildItem="change"></liu-folding-panel>
    <!-- 价格计算弹框 -->
    <view class="pupu_dialog">
      <view class="top t-ju-between">
        <view class="title">
          价格计算
        </view>
        <view class="title2">
          商品清单
        </view>
      </view>
      <view class="top t-ju-between no_border">
        <view class="key">
          购买/租赁
        </view>
        <view class="value t-center">
          <view class="circle selected">

          </view>
          <view class="buy">
            购买
          </view>
          <view class="circle">

          </view>
          <view class="lease">
            租赁
          </view>
        </view>
      </view>
      <view class="top t-ju-between no_border">
        <view class="key">
          优惠折扣
        </view>
        <view class="value">
          抖音团购券满500减300
        </view>
      </view>
      <view class="top t-ju-between">
        <view class="key">
          绿植数量
        </view>
        <view class="value">
          7
        </view>
      </view>
      <view class="top t-ju-between no_border marTop10">
        <view class="money">
          999/月
        </view>
        <view class="btn t-center">
          立即购买
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    ref
  } from 'vue'
  export default {
    
    setup() {
      const dataList = [{
        name: '一级标题',
        childs: [{
          name: '二级标题',
          childs: [{
            name: '二级标题'
          }, {
            name: '二级标题'
          }, {
            name: '二级标题'
          }]
        }, {
          name: '二级标题'
        }, {
          name: '二级标题'
        }]
      }, {
        name: '一级标题',
        childs: [{
          name: '二级标题'
        }, {
          name: '二级标题'
        }, {
          name: '二级标题'
        }]
      }]
      const change = (item) => {
        console.log(item, '当前选中行数据');
      }
      return {
        dataList,
        change
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #F5F5F5;
  }
</style>